<template>
  <div>
    <top-nav :isBack="true"></top-nav>
    <div class="page-main" v-loading='loading' v-if="tableData.id">
      <div class="titles">{{tableData.title}}</div>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item,index) in tableData.question" :title="item.title" :name="index" :key='index'>
          <div>{{item.answer}}</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeNames: [],
      tableData: [],
      loading: false
    }
  },
  created () {
    let {
      id
    } = this.$route.query
    this.getFormInfo(id)
  },
  methods: {
    getFormInfo (id) {
      this.loading = true
      this.$api.getCustomerLookIntoInfo({
        user_id: id
      }).then(res => {
        this.loading = false
        console.log(this.loading, '=====this.loading')
        if (res.code === 200) {
          this.tableData = res.data
          if (!res.data) return
          this.activeNames = res.data.question.map((item, index) => {
            return index
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .page-main {
    .titles {
      margin-bottom: 24px;
      font-size: 16px;
      background-color: #ecf8ff;
      border-left: 5px solid #50bfff;
      border-radius: 4px;
      padding: 8px 16px;
    }

    .el-collapse {
      margin: 0 20px;
    }
  }
</style>
